<template>
  <view class="send_box flex-c">
    <nav-bar customBack @customBack="isShow = true"
      backgroundImg="http://content.daylucky.cn/admin/image/60qeaqi81ln4hdy17csxglpb.png" />
    <view class="flex1 cont" style="overflow: hidden">
      <scroll-view class="scroll_cont" style="height: 100%;" scroll-y :scroll-top="scrollTop">
        <view v-show="step >= 1 || step >= 2" class="flex-r pr-58">
          <image class="avatar" src="http://content.daylucky.cn/admin/image/xsq6xz9lzy6vm71qdwidfvyh.png"></image>
          <view class="flex1 flex-c">
            <view v-show="step >= 1" class="msg_cont fadeIn flex1">
              hi！我是魔镜，欢迎你通过微信的小程序进入神奇的镜子魔法世界。我们得先彼此熟悉一下，请问你同意让我先了解一下近期的你的状态吗？
            </view>
            <view v-show="step >= 1 && !type5" class="flex-r choose_btn">
              <view class="user_btn user_btn1" @click="onChoose('type5', 1)">同意</view>
            </view>
            <view v-show="step >= 1 && type5" class="user_cont">同意</view>
            <view v-show="step >= 2" class="content fadeIn">{{ historyCont }}</view>
            <view v-show="step >= 2 && !type4" class="flex-r choose_btn">
              <view class="user_btn user_btn1" @click="onChoose('type4', 1)">继续</view>
            </view>
            <view v-show="step >= 2 && type4" class="user_cont">继续</view>
          </view>
        </view>
        <!-- 上周历史 -->
        <view v-show="step >= 3" class="flex-r pr-58">
          <image class="avatar" src="http://content.daylucky.cn/admin/image/xsq6xz9lzy6vm71qdwidfvyh.png"></image>
          <view class="flex1 flex-c">
            <view v-show="step >= 3" class="msg_cont fadeIn">
              欢迎来到魔镜的世界，请选择一张人物照片进行上传。可以选择上传自己的照片，也可以选择上传他人的照片。我会使用镜子魔法为你提供你所需要的答案。
            </view>
            <view class="flex-r choose_btn">
              <view v-if="!img" class="user_btn user_btn1" @click="onUpload">上传照片</view>
              <view v-show="img" :class="['upload fadeIn', img && 'uploadImg']">
                <image mode="aspectFill" class="user_img" :src="img" />
              </view>
            </view>
          </view>
        </view>
        <view v-show="step >= 4" class="flex-r pr-58">
          <image class="avatar" src="http://content.daylucky.cn/admin/image/xsq6xz9lzy6vm71qdwidfvyh.png"></image>
          <view class="flex1 flex-c">
            <view class="msg_cont">请问你上传的这张照片中的人物是你秘而不宣的小秘密吗？</view>
            <view v-if="!type1" class="flex-r choose_btn">
              <view class="user_btn user_btn1" @click="onChoose('type1', 1)">是小秘密</view>
              <view class="user_btn mr-40" @click="onChoose('type1', 2)">正常了解</view>
            </view>
            <view v-else class="user_cont">{{ type1 === 1 ? '是小秘密' : '正常了解 ' }}</view>
          </view>
        </view>
        <view v-show="step >= 5" class="flex-r pr-58">
          <image class="avatar" src="http://content.daylucky.cn/admin/image/xsq6xz9lzy6vm71qdwidfvyh.png"></image>
          <view class="flex1 flex-c">
            <view class="msg_cont">
              那就让我好好看看你的“小秘密”……请问这是你的照片，还是其他人的照片？如果是你的照片，请选择“关于我”；如果其他人的照片，请选择“关于Ta”。我说了，要坦诚面对我，认真做好选择。
            </view>
            <view v-if="!aboutVal" class="flex-r choose_btn">
              <view class="user_btn user_btn1" @click="onChooseAbout(1)">关于我</view>
              <view class="user_btn mr-40" @click="onChooseAbout(2)">关于Ta</view>
            </view>
            <view v-else class="user_cont">{{ aboutVal === 1 ? '关于我' : '关于Ta' }}</view>
          </view>
        </view>
        <view v-show="step >= 6 || step >= 7" class="flex-r pr-58">
          <image class="avatar" src="http://content.daylucky.cn/admin/image/xsq6xz9lzy6vm71qdwidfvyh.png"></image>
          <view class="flex1 flex-c">
            <view v-show="step >= 6" class="msg_cont fadeIn" @animationend="onShowLoading(false)">
              放心，接下来所出现的任何内容也是咱们俩的小秘密。因为是小秘密，所以我不告诉你我说的主题了，你需要阅读文字，来体验我的魔法。
            </view>
            <template v-if="step >= 7">
              <view class="content">{{ aboutCont }}</view>
              <view v-if="!type2" class="flex-r choose_btn">
                <view class="user_btn user_btn1" @click="onChoose('type2', 1)">我看完了，谢谢</view>
                <view class="user_btn mr-40" @click="onChoose('type2', 2)">我看完了，继续</view>
              </view>
              <view v-else class="user_cont">{{ type2 === 1 ? '我看完了，谢谢' : '我看完了，继续' }}</view>
            </template>
          </view>
        </view>
        <view v-show="step >= 8" class="flex-r pr-58">
          <image class="avatar" src="http://content.daylucky.cn/admin/image/xsq6xz9lzy6vm71qdwidfvyh.png"></image>
          <view class="flex1 flex-c">
            <view class="msg_cont">
              你可能需要知道更多的秘密，我也想为你提供更具体、更丰富的信息，虽然任何一次提供都需要我再耗费一次魔力，但这是我对待朋友的真心。只要你说需要，那我将竭尽全力。请问你是否需要我接下来的帮助？
            </view>
            <view v-if="!type3" class="flex-r choose_btn">
              <view class="user_btn user_btn1" @click="onChoose('type3', 1)">非常需要</view>
              <view class="user_btn mr-40" @click="onChoose('type3', 2)">需要</view>
            </view>
            <view v-else class="user_cont">{{ type3 === 1 ? '非常需要' : '需要' }}</view>
          </view>
        </view>
        <view v-show="step >= 9 || step >= 10" class="flex-r pr-58">
          <image class="avatar" src="http://content.daylucky.cn/admin/image/xsq6xz9lzy6vm71qdwidfvyh.png"></image>
          <view class="flex1 flex-c">
            <view class="msg_cont fadeIn">
              呼，好啦，我为你提供的秘密信息就在这个方块里面，点击一下。
            </view>
            <view v-show="!type7 && step === 9" :class="['lock show ml-14']" @click="type7 = true">{{ freeList[0].title }}
            </view>
            <view v-show="type7 && step === 9" class="user_cont fadeIn" @animationend="fnShowListCont(freeList[0])">{{
              freeList[0].title
            }}
            </view>
            <template v-if="freeList[0].content">
              <view class="content fadeIn">{{ freeList[0].content }}</view>
              <view v-if="!type6" class="flex-r choose_btn">
                <view class="user_btn user_btn1" @click="onChoose('type6', 1)">谢谢</view>
                <view class="user_btn mr-40" @click="onChoose('type6', 2)">继续</view>
              </view>
              <view v-else class="user_cont">{{ type6 === 2 ? '继续' : '谢谢' }}</view>
            </template>
          </view>
        </view>
        <view v-show="step >= 11 || step >= 12" class="flex-r pr-58">
          <image class="avatar" src="http://content.daylucky.cn/admin/image/xsq6xz9lzy6vm71qdwidfvyh.png"></image>
          <view class="flex1 flex-c">
            <view v-show="step >= 11" class="msg_cont fadeIn" @animationend="onShowLoading(false)">
              看完啦？我知道以上你看到的内容对于你来说还不够，所以现在我要继续为你施展魔法。放心，接下来所出现的任何内容也是咱们俩的小秘密，只有你和我知道。</view>
            <view v-show="step >= 12" class="flex_b_c pl-14" style="flex-wrap:wrap;">
              <view :class="['lock', item.is_show && 'show']" v-for="item in list" :key="item.id"
                @click="isShowVip = true">{{ item.title }}</view>
            </view>
          </view>
        </view>
        <view :class="['flex-r', !isShowLoading && 'hidden']">
          <image class="avatar mr-14" src="http://content.daylucky.cn/admin/image/xsq6xz9lzy6vm71qdwidfvyh.png"></image>
          <view class="loading">
            <view class="dot-pulse"></view>
          </view>
        </view>
      </scroll-view>
    </view>
    <van-popup :show="isShow" @close="() => isShow = false" custom-style="background: transparent">
      <view class="back_cont">
        <view>我们的每一次相遇，都是一期一会，退出本页面后，你与镜子的加密对话就结束了喔，而且聊天记录也会全部消失，真的要退出吗？</view>
        <view class="back_btn flex_b_c">
          <view class="btn_item" @click="onBack">确定</view>
          <view class="btn_item cancle" @click="isShow = false">取消</view>
        </view>
      </view>
    </van-popup>
    <van-popup :show="isShowVip" @close="() => isShowVip = false" custom-style="background: transparent">
      <view class="vip_cont">
        <view class="close" @click="isShowVip = false"></view>
        <view class="vip_cont_title"></view>
        <view class="swiper_title"></view>
        <swiper class="swiper" :autoplay="true" :circular="true" :indicator-dots="true" :interval="3000"
          indicator-active-color="#fff" indicator-color="#75617F">
          <swiper-item>
            <image mode="aspectFit" class="swiper_img"
              src="http://content.daylucky.cn/admin/image/rhecrue1g52003zddyfa4197.png"></image>
          </swiper-item>
          <swiper-item>
            <image mode="aspectFit" class="swiper_img"
              src="http://content.daylucky.cn/admin/image/yl95qo65tv4lhc22fw6jj5j0.png"></image>
          </swiper-item>
          <swiper-item>
            <image mode="aspectFit" class="swiper_img"
              src="http://content.daylucky.cn/admin/image/hb735iufbhdefati2a6aa1ez.png"></image>
          </swiper-item>
          <swiper-item>
            <image mode="aspectFit" class="swiper_img"
              src="http://content.daylucky.cn/admin/image/bg0w80rrxzp3mgzx7ozvkeue.png"></image>
          </swiper-item>
          <swiper-item>
            <image mode="aspectFit" class="swiper_img"
              src="http://content.daylucky.cn/admin/image/m7nt6mhigo4uv75i1cdtbpjr.png"></image>
          </swiper-item>

          <swiper-item>
            <image mode="aspectFit" class="swiper_img"
              src="http://content.daylucky.cn/admin/image/e4ppncj23eje8nhupfn2zcsy.png"></image>
          </swiper-item>

          <swiper-item>
            <image mode="aspectFit" class="swiper_img"
              src="http://content.daylucky.cn/admin/image/sppapw9gpx71gyyogru4pc6j.png"></image>
          </swiper-item>
        </swiper>
        <view class="tips">由于相关规范，小程序暂不支持开通该功能</view>
      </view>
    </van-popup>
  </view>
</template>
<script>
import { getPastHistoryCont, getAboutCont, getFrameworkList, onCheckImg } from '@/api'
import { uploadSync } from '@/utils/upload'

export default {
  data() {
    return {
      type1: '', // 正常了解 是小秘密
      type2: '',
      type3: '',
      type4: '',
      type5: '',
      type6: '',
      type7: '',
      aboutVal: '', // 1关于我 2关于他
      aboutCont: '',
      isShow: false,
      isShowVip: false,
      isShowLoading: false,
      list: [],
      freeList: {},
      historyCont: '',
      step: 0,
      img: '',
      scrollTop: 0,
    }
  },
  created() {
    this.fnGetHistoryCont()
  },
  methods: {
    onBack() {
      uni.redirectTo({
        url: '/pages/home/index'
      })
      // return
      // uni.navigateBack({
      //   delta: 1
      // })
    },
    async fnGetHistoryCont() {
      const { code, data } = await getPastHistoryCont()
      if (code === 1000) {
        this.historyCont = data.content
        this.onShowLoading(false)
        console.log(6666666666666666666)
      }
    },
    onUpload() {
      if (this.img) return;
      uni.chooseMedia({
        count: 1,
        mediaType: ["image"],
        sourceType: ["album"],
        maxDuration: 30,
        success: async (res) => {
          this.img = res.tempFiles[0].tempFilePath;
          this.isShowLoading = true
          this.$nextTick(() => {
            this.scrollTop = this.step * 2000
          })
          uploadSync(this.img).then(async image_url => {
            const { code, data, msg: title } = await onCheckImg({ image_url })
            if (code === 1000 && data.status) {
              this.onShowLoading(false)
            } else {
              this.img = ''
              uni.showToast({
                title,
                icon: 'none',
                duration: 3000
              })
              this.isShowLoading = false
            }
          })
        },
        fail(err) {
          console.log(err)
        }
      });
    },
    onShowLoading(bol = false) {
      this.isShowLoading = true
      this.$nextTick(() => {
        this.scrollTop = this.step * 3000
        let timer = setTimeout(() => {
          this.isShowLoading = bol
          this.step = this.step + 1
          this.$nextTick(() => {
            this.scrollTop = this.step * 3000
            clearTimeout(timer)
          })
          // resolve()
        }, 2000)
      })
      // return new Promise(resolve => {

      // })
    },
    onChoose(type, val) {
      this[type] = val
      this.$nextTick(() => {
        this.onShowLoading(false)
      })
    },
    async onChooseAbout(framework_type) {
      this.aboutVal = framework_type
      const { code, data } = await getAboutCont({ framework_type })
      if (code === 1000) {
        this.aboutCont = data.free_content.content
        this.list = data.pay_framework_list
        this.freeList = data.free_framework_list
        this.$nextTick(() => {
          this.onShowLoading(true)
        })
      }
    },
    async fnShowListCont({ framework_type, content_type }) {
      this.onShowLoading(false)
      const { code, data } = await getFrameworkList({ framework_type, content_type })
      if (code === 1000) {
        this.freeList[0].content = data.content
        // this.$nextTick(() => {
        //   this.scrollTop = this.step * 2000
        // })
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.fadeIn {
  animation: fadeIn 1s 1 forwards;
  opacity: 0;
}

.content {
  width: 586rpx;
  padding: 30rpx 24rpx 24rpx 24rpx;
  font-size: 32rpx;
  font-weight: 500;
  color: #FFFFFF;
  line-height: 46rpx;
  margin-bottom: 50rpx;
  margin-left: 14rpx;
  border-image: url("http://content.daylucky.cn/admin/image/y0vlt819x3cksztmxltcr4du.png") 58 58 58 58 fill/ 29px 29px 29px 29px stretch;
}

// 生成。9图
// https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Border-image_generator
.send_box {
  background: url(http://content.daylucky.cn/admin/image/60qeaqi81ln4hdy17csxglpb.png) repeat-y left top / 100% 100%;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;

  .cont {
    padding: 20rpx 0rpx 0 36rpx;
    padding-bottom: calc(50rpx + env(safe-area-inset-bottom));

    .scroll_cont {
      width: 730rpx;
      // padding-right: 36rpx;
    }

    .avatar {
      width: 60rpx;
      height: 108rpx;
      margin-right: 10rpx;
    }

    .msg_cont {
      width: 600rpx;
      margin-bottom: 40rpx;
      // width: 511rpx;
      // min-height: 180rpx;
      font-size: 32rpx;
      line-height: 46rpx;
      padding: 24rpx 12rpx 24rpx 38rpx;
      border-image: url("http://content.daylucky.cn/admin/image/bxmff1vrjephzxvgt1d93w1a.png") 68 48 64 44 fill/ 34px 24px 32px 22px stretch;
      // border-image: url("http://content.daylucky.cn/admin/image/bxmff1vrjephzxvgt1d93w1a.png") 62 48 64 44 fill/ 34px 24px 32px 22px stretch;
    }

    .upload {
      width: 366rpx;
      height: 320rpx;
      padding: 16rpx 38rpx 16rpx 18rpx;
      // margin-bottom: 40rpx;
      background: url(http://content.daylucky.cn/admin/image/7kr6j0226o7eah9c3b25du8f.png) no-repeat left top/ 365rpx 320rpx;

      // &.uploadImg {
      //   background: transparent;
      // }

      .user_img {
        width: 310rpx;
        height: 288rpx;
        border-radius: 10rpx;
      }
    }

    .choose_btn {
      width: 600rpx;
      margin-bottom: 40rpx;
      flex-direction: row-reverse;
      padding-bottom: 30rpx;

      .user_btn {
        min-width: 132rpx;
        padding: 0 10rpx;
        height: 64rpx;
        width: fit-content;
        font-size: 32rpx;
        color: #fff;
        line-height: 64rpx;
        text-align: center;
        background: linear-gradient(180deg, #8888D3 0%, #6464A3 100%);
        border-radius: 16rpx;
        border: 2rpx solid #49496F;
        // border-width: 1px;
        // border-style: solid;
        // border-image: url(http://content.daylucky.cn/admin/image/zs8wnlx8pukh1jz4qcsj0swj.png) 20 20 fill / 20px 20px stretch;

        // background: url(http://content.daylucky.cn/admin/image/zs8wnlx8pukh1jz4qcsj0swj.png) no-repeat left top/ cover;
        &.user_btn1 {
          background: linear-gradient(180deg, #FFBF74 0%, #C16801 100%);

          // border-image-source: url(http://content.daylucky.cn/admin/image/jeja56ttcntn4lulsegi6equ.png)
        }
      }
    }

    .user_cont {
      align-self: flex-end;
      padding: 0px 40rpx 0 30rpx;
      width: fit-content;
      height: 92rpx;
      line-height: 92rpx;
      color: #FFFFFF;
      font-size: 32rpx;
      border-width: 1px;
      border-style: solid;
      margin-bottom: 40rpx;
      border-image: url(http://content.daylucky.cn/admin/image/papptd0zud4ks4ssa9rj6u7j.png) 58 38 20 38 fill /58px 38px 20px 38px stretch;
    }
  }

}

.lock {
  width: 282rpx;
  height: 190rpx;
  position: relative;
  padding-top: 60rpx;
  padding-left: 50rpx;
  padding-right: 50rpx;
  line-height: 32rpx;
  font-size: 24rpx;
  color: #fff;
  text-align: center;
  // margin-right: 32rpx;
  margin-bottom: 40rpx;
  background: url(http://content.daylucky.cn/admin/image/hwg1zxchsib6pti45soub7ft.png) no-repeat left top/282rpx 190rpx;

  &:after {
    content: '';
    position: absolute;
    width: 185rpx;
    height: 92rpx;
    right: 0rpx;
    top: -36rpx;
    background: url(http://content.daylucky.cn/admin/image/u7j61aox1ht511oxvfxninxg.png) no-repeat left top/ 185rpx 92rpx;
  }

  &.show:after {
    display: none;
  }
}

.hidden {
  visibility: hidden;
}

.loading {
  width: 185rpx;
  height: 80rpx;
  margin-top: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
  background: url(http://content.daylucky.cn/admin/image/eyk0rs8wo1v01bvhdcsz7z55.png) no-repeat left top/ contain;

  .dot-pulse {
    position: relative;
    left: -9999px;
    width: 20rpx;
    height: 20rpx;
    border-radius: 10rpx;
    background-color: #D78A34;
    color: #D78A34;
    box-shadow: 9999px 0 0 -10px #D78A34;
    animation: dotPulse 1.5s infinite linear;
    animation-delay: .25s;

    &::before,
    &:after {
      content: '';
      display: inline-block;
      position: absolute;
      top: 0;
      width: 20rpx;
      height: 20rpx;
      border-radius: 10rpx;
      background-color: #D78A34;
      color: #D78A34;
    }

    &:before {
      box-shadow: 9984px 0 0 -10rpx #D78A34;
      animation: dotPulseBefore 1.5s infinite linear;
      animation-delay: 0s;
    }

    &:after {
      box-shadow: 10014px 0 0 -10rpx #D78A34;
      animation: dotPulseAfter 1.5s infinite linear;
      animation-delay: .5s;
    }
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes dotPulse {
  0% {
    box-shadow: 9999px 0 0 -10rpx #D78A34;
  }

  30% {
    box-shadow: 9999px 0 0 2rpx #D78A34;
  }

  60%,
  100% {
    box-shadow: 9999px 0 0 -10rpx #D78A34;
  }
}

@keyframes dotPulseBefore {

  0% {
    box-shadow: 9984px 0 0 -10rpx #D78A34;
  }

  30% {
    box-shadow: 9984px 0 0 2rpx #D78A34;
  }

  60%,
  100% {
    box-shadow: 9984px 0 0 -10rpx #D78A34;
  }
}

@keyframes dotPulseAfter {

  0% {
    box-shadow: 10014px 0 0 -10rpx #D78A34;
  }

  30% {
    box-shadow: 10014px 0 0 2rpx #D78A34;
  }

  60%,
  100% {
    box-shadow: 10014px 0 0 -10rpx #D78A34;
  }
}

.back_cont {
  padding: 48rpx 36rpx 0;
  width: 560rpx;
  height: 348rpx;
  font-size: 28rpx;
  text-align: center;
  font-weight: 500;
  color: #221328;
  line-height: 38rpx;
  background: url(http://content.daylucky.cn/admin/image/mi8mc2w0ai79vwpou6vqbene.png) no-repeat left top/ cover;

  .back_btn {
    margin-top: 50rpx;
    padding: 0 14rpx;

    .btn_item {
      width: 174rpx;
      height: 74rpx;
      text-align: center;
      line-height: 74rpx;
      background: url(http://content.daylucky.cn/admin/image/cglw528jc2ivz2z8t854god9.png) no-repeat left top/ 174rpx 74rpx;

      &.cancle {
        background-image: url(http://content.daylucky.cn/admin/image/zmldc0fr8s1sk8ornfrnpf23.png);
      }
    }
  }
}

.vip_cont {
  width: 650rpx;
  height: 760rpx;
  background: url(http://content.daylucky.cn/admin/image/0cl0qu3wx7wwg9bjr0bbdl71.png) no-repeat left top/ 650rpx 760rpx;
  position: relative;
  padding-top: 52rpx;

  .close {
    background: url(http://content.daylucky.cn/admin/image/atx7azbi2y9jfno86l4ytels.png) no-repeat left top/ 60rpx 60rpx;
    width: 60rpx;
    height: 60rpx;
    top: 40rpx;
    right: 40rpx;
    position: absolute;
  }

  .vip_cont_title {
    width: 196rpx;
    height: 56rpx;
    margin-bottom: 44rpx;
    margin: 0 auto;
    background: url(http://content.daylucky.cn/admin/image/87p7v6zkre4gwzj5vr1ziicj.png) no-repeat left top/ 196rpx 56rpx;
  }

  .swiper_title {
    margin: 0 auto 24rpx;
    width: 548rpx;
    height: 124rpx;
    background: url(http://content.daylucky.cn/admin/image/w0rcfo426qcpivl5dr2cu42o.png) no-repeat left top / 548rpx 124rpx;
  }

  .swiper {
    height: 356rpx;
    width: 547rpx;
    margin: 0 auto;

    .swiper_img {
      width: 547rpx;
      height: 356rpx;
    }
  }

  .tips {
    font-size: 28rpx;
    font-weight: 500;
    color: #FFFFFF;
    line-height: 40rpx;
    text-align: center;
    height: 40rpx;
    margin-top: 22rpx;
  }
}
</style>